<template>
	<view class="container">
		<image class="topimg"  src="https://pili-vod.guanxikeji.com/moban/img/1719976928060.png" mode=""></image>
		<view class="title">
			请输入验证码
		</view>
		<view class="name">
			<!-- 发送了短信验证码 -->
			已向你的手机号<text class="mobile">+86 {{form.mobile}}</text>
					<text style="margin-left: 5upx;"  @click="getcode">
						{{time}}
					</text>
		</view>

		<xt-verify-code   boxActiveColor="#FF1542" v-model="data.verifyCode" @confirm="confirm"  cursorColor="#FF1542"></xt-verify-code>
		<view class="btnBox" @click="form.smg?login():''" :style="{background:form.smg?'':'#ccc'}" >
			注册账号
		</view>

		<view class="bottom" v-if="agreement!=0">
			<label class="radio" @click="checkedchange"
				style="display: flex;align-items: center;justify-content: center;">
				<uni-icons type="checkbox" color="#2E7D32" v-if="checked" size="20"></uni-icons>
				<uni-icons type="circle" v-else size="20"></uni-icons>
				我已阅读并同意<text v-if="agreement!=2"
					@click="$goURl('/subPackages/personal/agreement/agreement?code=1')">《用户协议》</text><text style="color: #666;"
					v-if="agreement==3">与</text><text v-if="agreement!=1"
					@click="$goURl('/subPackages/personal/agreement/agreement?code=0')">《隐私政策》</text>
			</label>
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance,watch} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";
	const { proxy } = getCurrentInstance();
	const data = reactive({
		verifyCode:""
	})
	let form = reactive({
		mobile: '',
		password: '',
		share:'',
		smg:'',
		project:""
	})
	let time=ref('获取短信验证码')
	let checked=ref(true)
	let showPassword = ref(true)
	let agreement=ref(0)
	onShow(()=>{
	})
	onLoad((option)=>{
		form.mobile=option.mobile
		form.password=option.password
		if(option.share!="undefined"){
			form.share=option.share
		}

		getcode()
	})
	onPullDownRefresh(()=> {
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		})
	onReachBottom(()=>{
		console.log('onReachBottom')
	})

	function checkedchange(){
		console.log(12)
		checked.value=!checked.value
	}
	function agreementGet() {
		proxy.$request({
			url: `api/agreement/?code=0`,
			method: 'get',
			success(res) {
				proxy.$request({
					url: `api/agreement/?code=1`,
					method: 'get',
					success(ress) {
						if (res.data) {
							if (ress.data) {
								agreement.value=3
							} else {
								agreement.value=1
							}
						} else {
							if (ress.data) {
								agreement.value=2
							} else {
								agreement.value=0
							}
						}
					}
				})
			}
		})
	}
	function getcode(){
		if (!checked.value) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '请同意用户协议与隐私协议'
			});
			return false;
		}
		if(time.value!='获取短信验证码'){
			return false
		}
		if (!(/^1[3456789]\d{9}$/).test(form.mobile)) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '手机号不正确'
			});
			return false;
		}
		proxy.$request({
			url: `api/smscodesview/`,
			method:'post',
			data:{mobile:form.mobile,code:0,share:form.share} ,
			success(res) {
				uni.showToast({
					icon:'none',
					title:res.errmsg
				})
				if(res.errno==0){
					form.project=res.data
					uni.setStorageSync("userInfo",{p:res.data,token:""})
					agreementGet()
					let times=60
					let timer=setInterval(function(){
						if(times==0){
							time.value='获取短信验证码'
							clearInterval(timer)
						}else{
							times--
							time.value=times+'S后重新获取'
						}
					},1000)
				}
			}
		})
	}
	function confirm(e){
		console.log(e)
		form.smg=e
	}

	function login() {
		if (!checked.value) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '请同意用户协议与隐私协议'
			});
			return false;
		}
		if (!(/^1[3456789]\d{9}$/).test(form.mobile)) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '手机号不正确'
			});
			return false;
		}

		proxy.$request({
			url: `api/register/`,
			method: 'post',
			data: form,
			success(res) {
				console.log(res)
				uni.showToast({
					icon: 'none',
					title: res.errmsg
				})
				if (res.errno == 0) {
					let user=res.data
					user['password']=form.password
					uni.setStorageSync('userInfo',user)
					setTimeout(()=>{
						uni.switchTab({
							url: '/pages/personal/index'
						})
					},1000)

				}
			}
		})
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.container{
		padding: 30upx;
		text-align: center;
		.topimg{
			width: 109px;
			height: 109px;
		}
		.title{
			font-size: 22px;
			font-family: Source Han Sans SC, Source Han Sans SC-Bold;
			font-weight: 700;
			color: #000000;
			line-height: 36px;
			letter-spacing: 0.44px;
		}
		.name{
			font-size: 12px;
			font-family: Source Han Sans SC, Source Han Sans SC-Regular;
			font-weight: 400;
			color: #333333;
			line-height: 24px;
			margin-bottom: 40px;
			.mobile{
				color: #FF1542;
				font-weight: bold;
			}
		}
		.time{
			color: #999;
		}

	}
	.btnBox{
		margin-top: 40px;
	}
	::v-deep .xt__verify-code .xt__input-ground .xt__box {

		width: 46px !important;
		height: 54px !important;
		background: #f7f8f8 !important;
		border-radius: 9px !important;
		// border: 1px solid #FF1542 !important;
	}
	::v-deep .xt__input-ground .xt__box .xt__code-text {
		font-size: 22px !important;
	}
</style>
